// vuex的使用步骤
// 1. 下载 yarn add vuex -S / npm i vuex - S
// 2. 导入
// 何时需要些相对路径: 自己写的文件(非node_modules中的)
// 何时直接写包名：node的内置模块或者yarn/npm下载的第三方包
// 3. 注册
import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)// 会给组件添加 $store     $route $router

// 4. 创建store对象
const store = new Vuex.Store({
  // 4.1 state - 存储共享的数据源 - 类似data函数
  state: {
    num: 100
  },
  // 4.2 mutations - 唯一 同步 修改的 state的 数据操作员 , 本质就是函数
  mutations: {
    addNum (state, val = 1) {
      // state.num = state.num + val
      state.num += val
    },
    subNum (state, val = 1) {
      state.num -= val
    },
    setNum (state, val) {
      state.num = val
    }
  },
  // 4.3 actions - 异步修改state，但是 最终还是需要 commit 到 mutations中 , 本质也是函数
  actions: {
    asyncAddNum (store, val = 1) {
      setTimeout(() => {
        store.commit('addNum', val)
      }, 2000)
    },
    asyncSubNum (store, val = 1) {
      setTimeout(() => {
        store.commit('subNum', val)
      }, 2000)
    }
  }
})
// 5. 导出
export default store // 给 main.js 使用
